<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px" class="aside-menu-container">
        <el-menu :default-active="activeMenuItem" mode="vertical" router @select="handleMenuSelect">
          <!-- 使用自定义组件或模板插槽来添加图片 -->
          <el-menu-item index="/SessionCoffee">
            <img src="/季节图片.png" alt="Seasonal Coffee" class="menu-item-image" />
            <span>季节限定</span>
          </el-menu-item>
          <el-menu-item index="/Dirty">
            <img src="/D图片.png" alt="Dirty Coffee" class="menu-item-image" />
            <span>Dirty系列</span>
          </el-menu-item>
          <el-menu-item index="/Espresso">
            <img src="/意式图片.png" alt="Espresso" class="menu-item-image" />
            <span>意式咖啡</span>
          </el-menu-item>
          <el-menu-item index="/ZeroCoffee">
            <img src="/零咖图片.png" alt="Zero Coffee" class="menu-item-image" />
            <span>零咖系列</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header class="coffee-wrap">
          <SearchCoffee />
          <CoffeeCart />
        </el-header>
        <el-main>
          <router-view class="coffeeitem-wrap"></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import SearchCoffee from "./SearchCoffee.vue";
import CoffeeCart from "./CoffeeCart.vue";

export default {
  data() {
    return {
      activeMenuItem: "/SessionCoffee", 
    };
  },
  components: {
    SearchCoffee,
    CoffeeCart,
  },
  methods: {
    handleMenuSelect(index) {
      this.activeMenuItem = index; 
    },
  },
};
</script>

<style>
.common-layout {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f2f2f2;
  max-width: 1500px; /* 设置最大宽度 */
  margin: 0 auto; /* 使 .common-layout 居中 */
}

.aside-menu-container {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.el-menu-item {
  background-color:#f2f2f2;
  transition: background-color 0.3s;
  text-align: center;
  display: flex;
  align-items: center; 
}

.menu-item-image {
  width: 30px;
  height: 30px;
  margin-right: 10px;
  vertical-align: middle;
  object-fit: cover;
}

.el-menu-item.is-active,
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #a67c52;
  color: white;
}

.coffee-wrap {
  display: flex;
  justify-content: center;
  gap: 30px;
}

.coffeeitem-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  /*justify-content: center;  如果需要，可以使 .coffeeitem-wrap 的子元素在水平方向上居中（但这可能会影响它们的换行布局） */
}
</style>